<template>
  <div v-loading="isLoading" class="list-table">
    <div id="d-scroll" class="infinite-list-wrapper infiniteActTask">
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li v-for="(item, index) in List" :key="index" class="list-item">
          <span class="border" style="display:none;" />
          <i v-if="item.urgent === 'Y'" class="urgent" />
          <el-link type="primary" @click="openTask(item)">{{ item.title }}-{{ item.applyNickName }}</el-link>
        </li>
      </ul>
      <p> {{ loadTit }}</p>
      <div v-if="emptyIcon" class="noneData" style="height: auto;">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="formOpen" width="95%" custom-class="maxDialog actTaskDialog" :close-on-click-modal="false" :lock-scroll="false">
      <ActTaskForm ref="actTaskForm" />
    </el-dialog>

  </div>
</template>

<script>
import { todoList } from '@/api/act/task/actTask'
import ActTaskForm from '../task/actTaskForm'
export default {
  components: {
    ActTaskForm
  },
  data() {
    return {
      isLoading: true,
      loading: false,
      emptyIcon: false,
      List: [],
      // 弹出层标题
      title: '',
      // 当前点击的任务ID
      taskId: null,
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 0,
        pageSize: 10,
        title: undefined,
        applyUserId: '',
        processName: undefined
      },
      wfMenuProcessData: {},
      // 表单参数
      form: {},
      total: '',
      loadTit: this.$t('加载中...')
    }
  },
  computed: {
    disabled() {
      return this.loading
    }
  },
  watch: {
    List: {
      handler(val) {
       if (val === [] || val.length === 0) {
         this.loading = true
       }
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    load() {
      this.queryParams.pageNum++
      this.getList(true)
    },
    /** 查询待办列表 */
    getList(flag) {
      this.emptyIcon = false
      this.isLoading = true
      this.loadTit = this.$t('加载中...')
      todoList(this.queryParams).then(response => {
        if (response.code === 200 && flag) {
          this.List = this.List.concat(response.rows)
          // 多次加载数据
          if (this.List.length >= response.total && response.total !== 0) {
             this.loadTit = this.$t('没有更多了')
             this.loading = true
          }
          if (response.total === 0) {
            this.loadTit = ''
            this.emptyIcon = true
            this.isLoading = false
          }
          this.isLoading = false
        } else {
          for (let i = 0; i < this.List.length; i++) {
            if (this.List[i].id === this.taskId) {
              this.List.splice(i, 1)
            }
          }
          this.total = response.total
          this.isLoading = false
          this.loadTit = ''
          // // 第一次加载
          // if (response.total === 0) {
          //   this.List = []
          //   this.loadTit = ''
          //   this.emptyIcon = true
          //   this.isLoading = false
          // } else {
          //   this.List = response.rows
          //   this.total = response.total
          //   this.isLoading = false
          // }
        }
      })
    },

    // 取消按钮
    cancel() {
      this.formOpen = false
    },
    // 打开待办页面
    openTask(row) {
      this.taskId = row.id
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.actTaskForm.init(row)
      })
    }
  }
}
</script>
